<template>

    <UxDialog :visible="(force && !isLogin) || visible" title="" @close="close()" class="login-dialog" :force="force? 'force' : ''">
        <div class="login-content">

            <!-- 登录 -->
            <LoginLogin v-if="tab == 'login'" :tab.sync="tab" />

            <!-- 注册 -->
            <LoginSignup v-if="tab == 'signup'" :tab.sync="tab" />

            <!-- 找回密码 -->
            <LoginPassword v-if="tab == 'password'" :tab.sync="tab" />

        </div>
    </UxDialog>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "LoginDialog",
    props: {
        force: { type: Boolean, default: false }, // 是否强制登录
    },
    computed: {
        ...mapGetters({ isLogin: "getIsLogin" }),
    },
    data () {
        return {
            visible: false,
            tab: 'login', // login signup password
            callback: [], // 回调
        };
    },
    watch: {
        isLogin: {
            handler: function (newval, oldval) {
                if (oldval != newval && newval) {

                    this.callback.map(callback => {
                        try {
                            callback && callback()
                        } catch (err) {
                            console.log(err);
                        }
                    })
                    this.close();
                }
            },
            deep: true,
            immediate: true,
        },

    },
    methods: {

        close () {
            this.visible = false;
            this.callback = []
        },

        openDialog (type, callback) {
            if (this.isLogin) {
                // 已经登录了
                callback && callback()
            } else {
                this.tab = type;
                this.visible = true;
                this.callback = [];
                callback && this.callback.push(callback)
            }
        },

    },
    created () {
        if (process.client) {
            this.$on("global:userLogin", (cb) => this.openDialog('login', cb));
            this.$on("global:userSignup", (cb) => this.openDialog('signup', cb));

            // 如果有推广码
            try {
                const query = this.$route.query || {}
                const config = JSON.parse(localStorage.getItem("CONFIG") || '{}');
                const nowtime = new Date().getTime();
                if (query.code) {
                    // 有推广码，则存入
                    const validity = 30 * 24 * 60 * 60 * 1000; // 有效期30天
                    config.distributor = { code: query.code, expire: nowtime + validity }
                    localStorage.setItem("CONFIG", JSON.stringify(config));
                } else if (config.distributor && config.distributor.expire < nowtime) {
                    // 本地已经有推广码了，判断过期时间
                    // 过期了
                    delete config.distributor;
                    localStorage.setItem("CONFIG", JSON.stringify(config));
                }
            } catch (e) {
                // 错误
                console.log(e)
            }

        }
    },
    mounted () { },
    beforeDestroy () { },
    destroyed () { },
};
</script>

<style lang="scss" scoped>
.login-dialog {
    &::v-deep > .dialog-content {
        border-radius: 12px;
        overflow: hidden;
        position: relative;
    }

    &[active='active'][force='force']::v-deep {
        background: none;
        overflow: auto;
        display: block;
        z-index: 9;
        pointer-events: none;

        .dialog-close {
            display: none;
        }

        & > .dialog-content {
            max-height: initial;
            overflow: visible;
            background: none;
            align-items: center;
            justify-content: center;
            border: 1px solid #e6e6e6;
            background: #fff;
            box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.04);
            border-radius: 12px;
            pointer-events: all;
        }
    }
}

.login-content {
    width: calc(100vw - 152px);
    max-width: 900px;
    min-width: 800px;
    height: calc(100vh - 152px);
    max-height: 666px;
    min-height: 500px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}

@media (max-width: 960px) {
    .login-content {
        min-width: initial;
    }

    .login-dialog {
        &[active='active'][force='force']::v-deep {
            .dialog-content {
                border: none !important;
                box-shadow: none !important;
            }
        }
    }
}
</style>
